<template>
 <div id="home">
   <div v-if="!showLoading">
      <!-- 头部 -->
     <Header/>
     <!-- 轮播图 -->
     <Sowing :sowing_list="sowing_list"/>
     <!-- 首页导航链接 -->
     <Nav :nav_list="nav_list"/>
     <!-- 秒杀 -->
     <FlashSale :flash_sale_product_list="flash_sale_product_list"/>
     <!-- 猜你喜欢 -->
     <YouLike :you_like_product_list="you_like_product_list"/>
     <!-- 返回顶部 -->
     <MarkPage v-if="showBackStatus" :scrllToTop="scrllToTop"/>
   </div>
        <van-loading
                v-else
                type="spinner"
                color="#75a342"
                style="position: absolute;left:50%;
                top: 40%;transform: translate(-50%)"
        >
            小杨正在拼命加载中…
        </van-loading>
 </div> 
</template>
<script>
//在index里拿到promise接口对象
import {getHomeData, addGoodsToCart} from './../../service/api/index'
//引入首页的子组件
import Header from './components/header/Header'
import Sowing from './components/sowing/Sowing'
import Nav from './components/nav/Nav'
import FlashSale from './components/flashSale/FlashSale'
import YouLike from './components/youLike/YouLike'
import MarkPage from './components/markPage/MarkPage'
//引入返回顶部的函数
import {showBack, animate} from "@/config/global";
//引入通知插件
import PubSub from 'pubsub-js';
import { Toast } from 'vant';
//引入 vuex
import {mapMutations, mapState} from 'vuex'
export default {
    name:"Home",
    data(){
      return{
       //首页轮播图数据
       sowing_list:[],
       //导航的数据
       nav_list: [],
       //秒杀数据
       flash_sale_product_list: [],
       //猜你喜欢
       you_like_product_list: [],
       // 是否显示加载图标
       showLoading:true,
       //是否显示返回顶部的按钮
       showBackStatus:false
      }
    },
    created(){
      //在生命周期里面使用async await的形式获取数据
      this.reqData();
    },
    computed:{
      ...mapState(['userInfo'])
    },
    mounted(){
       // 订阅消息（添加到购物车的消息）
           PubSub.subscribe('homeAddToCart', (msg, goods)=>{
               if(msg === 'homeAddToCart'){
                   // 判断用户是否登录
                   if(this.userInfo.token){// 已经登录
                   this.dealGoodsAdd(goods)
                   }else { // 没有登录
                       this.$router.push('/login');
                   }
               }
           });
      },
    //注册子组件
    components:{
       Header,
       Sowing,
       Nav,
       FlashSale,
       YouLike,
       MarkPage,
    },
    methods:{
      ...mapMutations(["ADD_GOODS"]),
      //点击回到顶部
      scrllToTop(){
        let docB = document.documentElement || document.body;
        animate(docB, {scrollTop: '0'}, 400, 'ease-out');
      },
      //拿取接口数据
      async reqData(){
        let res= await getHomeData();
        if(res.success){
            this.sowing_list = res.data.list[0].icon_list;
            this.nav_list = res.data.list[2].icon_list;
            this.flash_sale_product_list = res.data.list[3].product_list;
            this.you_like_product_list = res.data.list[12].product_list;
            this.showLoading = false;
            //开始监听滚动
            showBack((status)=>{
              //console.log(status);
              this.showBackStatus=status;
            })
        }
      },
      //添加商品到购物车
    async dealGoodsAdd(goods){
      //调用服务器端接口
         let result =await addGoodsToCart(this.userInfo.token, goods.id, goods.name, goods.price, goods.small_image,);
         console.log(result);
         if(result.success_code==200){
           this.ADD_GOODS({
              goodsId: goods.id,
              goodsName: goods.name,
              smallImage: goods.small_image,
              goodsPrice: goods.price
           });
           Toast({
              message: '添加到购物车成功！',
              duration: 800
           });
         }
      }
    },

    
     beforeDestroy() {
            PubSub.unsubscribe('homeAddToCart')
        }
}
</script>
<style lang="less" scoped>
  #home{
    width: 100%;
    height: 100%;
    background: #fff;
    }
</style>